<template>
  <!-- 聊天界面 -->
  <div>
    <!-- 头部导航栏 -->
    <van-nav-bar class="van-hairline--surround"
                 :title="this.$store.state.groupList[this.$route.query.index].groupname"
                 left-text=""
                 right-text="全体成员"
                 left-arrow
                 @click-left="onClickLeft"
                 @click-right="onClickRight" />
    <!-- 聊天展示 -->
    <chatitem-com class="chatbox"
                  v-for="(item, index) in chatList"
                  :chatitem="item"
                  :key="index"
                  :sendchat='sendchat'
                  :id='i'>
      <div v-if="!item.isPyp">
        <div style="padding:5px">
          {{item.name}}<br>
          {{item.chatcontent}}
        </div>
      </div>
      <div v-else>
        <div class="tips">
          你拍了拍"{{item.name}}"
        </div>
      </div>
      <!-- 发送聊天信息 -->
    </chatitem-com>
    <chatinput-com :sendchat='sendchat'></chatinput-com>
  </div>
</template>

<script>
import chatinputCom from './ChatinPutcom'
import chatitemCom from './ChatItem'

export default {
  components: {
    chatinputCom,
    chatitemCom
  },
  data () {
    return {
      i: this.$route.query.index,
      // pypL: this.$store.state.pypList[this.$route.query.index].pypC,
      chatList: this.$store.state.groupList[this.$route.query.index].chatList
    }
  },
  methods: {
    // 添加聊天记录
    sendchat: function (value) {
      const newObject = {
        name: '小黄',
        chatcontent: value,
        isActive: false,
        headerimg: require('../../assets/images/CommunityImages/ChatImages/小黄.jpg'),
        index: this.$route.query.index
      }
      this.$store.dispatch('_addChatList', newObject)
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.push({ path: 'Allmember', query: { index: this.$route.query.index } })
    }
  }
}
</script>

<style scoped>
span {
  border-left: 20px;
}
.tips {
  text-align: center;
  color: #666;
}
.chatbox {
  padding-left: 3%;
  padding-right: 3%;
  margin-top: 3%;
}
.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
::v-deep .van-icon,
::v-deep .van-nav-bar__text,
::v-deep .van-ellipsis {
  color: #fff;
}
</style>
